<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <el-form-item label="" prop="searchValue">
          <el-input v-model="queryParams.searchValue" placeholder="会员昵称/姓名/手机号" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="注册时间：" prop="data">
          <el-date-picker clearable v-model="date" type="datetimerange" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="渠道来源：" prop="source">
          <el-select v-model="queryParams.source" multiple collapse-tags placeholder="全部" style="width: 240px;">
            <el-option v-for="item in sourceList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态：" prop="status">
          <el-select v-model="queryParams.status" placeholder="全部">
            <!-- <el-option label="是" value="2"></el-option>
            <el-option label="否" value="1"></el-option> -->
            <el-option v-for="item in blackList" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="注册类型：" prop="customerRegisterType">
          <el-select v-model="queryParams.customerRegisterType" placeholder="全部">
            <el-option v-for="item in customerRegisterTypeLs" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推荐人：" prop="referrerName">
          <el-input v-model="queryParams.referrerName" placeholder="昵称、姓名、手机号" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="listBox">
      <div style="margin-bottom: 14px">
        <export-excel-button title="会员信息列表" action="/userManager/customer/export" :params="ExportParams"  type="2"/>
      </div>
      <el-table v-loading="loading" :data="customerList" stripe border @sort-change='sortChange'>
        <el-table-column label="序号" type="index" width="55" align="center" fixed />
        <el-table-column label="注册类型" align="center" prop="customerRegisterType" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="customerRegisterTypeLs" :value="scope.row.customerRegisterType" />
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status"></el-table-column>
        <el-table-column label="会员ID" align="center" prop="id"/>
        <!-- <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true" /> -->
        <el-table-column label="手机号码" align="center" prop="phoneNumber" />
        <!-- <el-table-column label="性别" align="center" prop="sex" :show-overflow-tooltip="true" /> -->
        <!-- <el-table-column label="年龄" align="center" prop="age" :show-overflow-tooltip="true" /> -->
        <!-- <el-table-column label="籍贯" align="center" prop="nativePlace" :show-overflow-tooltip="true" /> -->
        <!-- <el-table-column label="生日" align="center" prop="birthday" :show-overflow-tooltip="true" /> -->
        <el-table-column label="卡优优累计消费" align="center" prop="kyyPayMoney"></el-table-column>
        <el-table-column label="神椰累计消费" align="center" prop="shenyePayMoney"></el-table-column>
        <!-- <el-table-column label="预付卡数量" align="center" prop="cardNum" :show-overflow-tooltip="true" width="120"></el-table-column> -->
        <!-- <el-table-column label="数字权益卡数量" align="center" prop="assetUsable" :show-overflow-tooltip="true" width="120" /> -->
        <!-- <el-table-column label="盲盒券数量" align="center" prop="boxCouponUsable" :show-overflow-tooltip="true" width="120" /> -->
        <!-- <el-table-column label="预付卡购卡金额" align="center" prop="payMoney" :show-overflow-tooltip="true" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.payMoney != '-'">￥{{ scope.row.payMoney }}</div>
            <div v-else>{{ scope.row.payMoney }}</div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="权益卡购卡金额" align="center" prop="equityCardMoney" :show-overflow-tooltip="true" width="120" /> -->
        <!-- <el-table-column label="日常消费累计金额" align="center" prop="dailyMoney" :show-overflow-tooltip="true" width="140" /> -->
        <el-table-column label="CoCo" align="center" prop="coin" sortable="custom" />
        <el-table-column label="椰分" align="center" prop="tpoint" sortable="custom" />
        <!-- <el-table-column label="算力" align="center" prop="hashRate" sortable="custom" :show-overflow-tooltip="true" /> -->
        <!-- <el-table-column label="产值系数" align="center" prop="outPutValue" :show-overflow-tooltip="true" /> -->
        <el-table-column label="渠道来源" align="center" prop="source">
          <template slot-scope="scope">
            <dict-tag :options="sourceList" :value="scope.row.source" />
          </template>
        </el-table-column>
        <el-table-column label="注册时间" align="center" prop="createTime" width="100" />
        <!-- <el-table-column label="邀请人" align="center" prop="referrerNickName" :show-overflow-tooltip="true" /> -->
        <!-- <el-table-column label="黑名单用户" align="center" prop="source" :show-overflow-tooltip="true" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.isBlack == 1">是</div>
            <div v-else>否</div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="推荐用户数" align="center" prop="referrerCount" :show-overflow-tooltip="true" width="120" /> -->
        <el-table-column label="最后登录时间" align="center" prop="lastLoginTime" width="100" />
        <el-table-column label="操作" align="center" width="130" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDetail(scope.row)">
              会员详情</el-button>
            <!-- <el-button size="mini" type="text" @click="handleView(scope.row, 0)">
              预付卡详情</el-button>
            <el-button size="mini" type="text" @click="handleView(scope.row, 1)">
              数字权益卡详情</el-button>
            <el-button size="mini" type="text" @click="handleRecommended(scope.row)">
              推荐用户列表</el-button>
            <el-button size="mini" type="text" @click="handleCoin(scope.row)">
              积分详情</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        :pageSizes.sync="pageSizes" @pagination="getList" />

    </div>
  </div>
</template>

<script>
import {
  listCustomer,
  exportCustomer,
  adminDict
} from "@/api/members";
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
  name: "Customer",
  components: {
    ExportExcelButton
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 会员列表表格数据
      customerList: [],
      // 页脚参数
      pageSizes: [10, 20, 30, 50, 1000],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        searchValue: null,
        startDate: '',
        endDate: '',
        source: [],
        levelType: null,
        status: '0',
        column: '',
        sort: '',
        referrerName: '',//推荐人
        customerRegisterType:'',//注册状态
      },
      // 黑名单用户列表
      blackList: [],
      date: [],
      levelTypeList: [],
      sourceList: [],
      customerRegisterTypeLs:[]
    };
  },
  computed: {
    ExportParams() {
      const params = {
        ...this.queryParams
      };
      return params;
    },
  },
  created() {
    this.getBlackList()
    this.getlinkagelist()
    this.getSourcelist()
    this.getCustomerRegisterTypeLs()
    this.getList();
  },
  methods: {
    getBlackList() {
      //获取字典
      const params = {
        dictType: "bee_customer_status",
      };
      adminDict(params).then((res) => {
        if (res.result.length != 0) {
          this.blackList = res.result[0].dictList;
        }

      });
    },
    getlinkagelist() {
      //获取商户类型字典
      const params = {
        dictType: "customer_level_type",
      };
      adminDict(params).then((res) => {
        if (res.result.length != 0) {
          this.levelTypeList = res.result[0].dictList;
        }

      });
    },
    //获取渠道来源字典
    getSourcelist() {
      const params = {
        dictType: "bee_customer_source",
      };
      adminDict(params).then((res) => {
        this.sourceList = res.result[0].dictList;
      });
    },
    //获取注册类型字典
    getCustomerRegisterTypeLs() {
      const params = {
        dictType: "customer_register_type",
      };
      adminDict(params).then((res) => {
        this.customerRegisterTypeLs = res.result[0].dictList;
      });
    },
    /** 查询会员列表列表 */
    getList() {
      this.loading = true;
      if (this.date) {
        this.queryParams.startDate = this.date[0]
        this.queryParams.endDate = this.date[1]
      }
      listCustomer(this.queryParams).then(response => {
        this.total = response.total
        this.customerList = response.rows
        this.customerList = this.customerList.map(item => {
          // console.log('item',item)
          Object.keys(item).forEach(key => {
            if (item[key] === '') {
              item[key] = '-'
            }
          })
          return item
        })
        console.log('this.customerList', this.customerList)
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm();
      this.$refs["queryForm"].resetFields();
      this.date = []
      console.log('this.queryParams', this.queryParams)
      this.handleQuery();
    },
     /* 会员详情 */
    handleDetail(row){
      this.$router.push({
        path: "/members/membersDetail",
        query: {
          id: row.id,
        },
      })
    },
    /** 详情按钮操作 */
    handleView(row, type) {
      // this.$refs.dialog.open(row.id, true);
      this.$router.push({
        path: "/members/Prepaid-details",
        query: {
          id: row.id,
          type: type
        },
      })
    },
    //推荐用户列表
    handleRecommended(row) {
      // this.$refs.dialog.open(row.id, true);
      this.$router.push({
        path: "/members/recommended-list",
        query: {
          id: row.id,
        },
      })
    },
    //coin详情
    handleCoin(row) {
      this.$router.push({
        path: "/members/coin-detail",
        query: {
          id: row.id,
        },
      })
    },
    // /** 导出按钮操作 */
    // handleExport() {
    //   const queryParams = this.queryParams;
    //   this.$modal.confirm('是否确认导出所有会员列表数据项？').then(() => {
    //     this.exportLoading = true;
    //     return exportCustomer(queryParams);
    //   }).then(response => {
    //     this.$download.name(response.msg);
    //     this.exportLoading = false;
    //   }).catch(() => { });
    // },
    //排序
    sortChange(column, prop, order) {
      //点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据
      console.log(column + '---' + column.prop + '---' + column.order)
      //输出的结果 [object Object]---name---ascending
      if (column.prop == 'coin') {
        this.queryParams.column = 1
        if (column.order == 'ascending') {
          this.queryParams.sort = '1'
        } else {
          this.queryParams.sort = '2'
        }
      } else if (column.prop == 'tpoint') {
        this.queryParams.column = 2
        if (column.order == 'ascending') {
          this.queryParams.sort = '1'
        } else {
          this.queryParams.sort = '2'
        }
      } else if (column.prop == 'hashRate') {
        this.queryParams.column = 3
        if (column.order == 'ascending') {
          this.queryParams.sort = '1'
        } else {
          this.queryParams.sort = '2'
        }
      }

      this.getList()
    },
  }
};

</script>
<style lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px 0;
}

.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
</style>
